<template>
	<view class="page-container">
		<!-- 搜索栏 -->
		<view class="search-container">
			<u-search v-model="searchValue" placeholder="开票单位/交款人/票据号码搜索" bg-color="#f5f5f5" border-color="#ddd"
				borderRadius="16rpx" height="70rpx" padding="0 15rpx 0 70rpx" placeholder-color="#999"
				@custom="onSearch">
				<view slot="prefix" class="search-icon">
					<u-icon name="search" color="#999" size="30rpx"></u-icon>
				</view>
			</u-search>
		</view>
		<!-- 筛选栏 -->
		<view class="filters">
			<view class="filter-item">
				<uni-datetime-picker type="date" placeholder="开票日期" v-model="einvoiceDate" @change="confirmDate" />
			</view>
			<view class="filter-item">
				<uni-data-select v-model="billStatues" placeholder="票据状态" :localdata="billStatuesList"
					@change="billStatuesChange"></uni-data-select>
			</view>
		</view>

		<!-- 票据列表 -->
		<view v-if="receipts.length>0" class="ticket-list">
			<u-list @scrolltolower="scrolltolower" :height="listHeight">
				<!-- 票据卡片 -->
				<view class="ticket-card" @click="toDetail(receipt)" v-for="(receipt, index) in receipts" :key="index">
					<view class="ticket-header">
						<u-icon size="20" name="/static/assets/logoIcon.png"></u-icon>
						<view class="ticket-info">
							<text class="patient-name">{{receipt.agencyName}}</text>
						</view>
						<text class="amount">¥{{receipt.totalAmount}}</text>
					</view>

					<view class="ticket-details">
						<view class="detail-position">
							<text class="label"></text>
							<view class="status">
								<view class="status-dot"
									:style="{backgroundColor:receipt.status==1?'#4070ff':(receipt.status==8?'#44d794':( receipt.status==9?'#fe4040':''))}">
								</view>
								<text class="status-text"
									:style="{color:receipt.status==1?'#4070ff':(receipt.status==8?'#44d794':( receipt.status==9?'#fe4040':''))}">
									{{receipt.status==1?'正常票据':(receipt.status==8?'已换开':( receipt.status==9?'已作废':''))}}
								</text>
							</view>
						</view>
						<view class="detail-item">
							<text class="label">票据号码:</text>
							<text class="value">{{receipt.einvoiceNumber}}</text>
						</view>
						<!-- <view class="detail-item">
							<text class="label">票据代码:</text>
							<text class="value">{{receipt.einvoiceCode}}</text>
						</view> -->
						<view class="detail-item">
							<text class="label">交 款 人:</text>
							<text class="value">{{receipt.payerName}}</text>
						</view>
						<view class="detail-item">
							<text class="label">票据种类:</text>
							<text class="value">{{receipt.billType}}</text>
						</view>

					</view>

					<view class="ticket-remark">
						<text class="remark-label"><text v-if="receipt.remark">备注:</text>{{receipt.remark||''}}</text>
						<text class="remark-date">{{receipt.issueDate}}</text>
					</view>
				</view>
			<u-loadmore v-if="receipts.length>0" :status="dataTip" loadmore-text="上滑加载更多" />
			</u-list>
		</view>
		<view v-else class="emptyBg">
			<u-image src="/static/assets/empty.png" height="300px" mode="aspectFit"></u-image>
		</view>
	</view>
</template>

<script>
	import {
		postUnitsearch
	} from '@/api/ticketApi.js'
	export default {
		data() {
      return {
        listHeight: uni.getSystemInfoSync().windowHeight - 150,
				receipts: [],
				dataTip: 'loadmore', //加载前值为loadmore，加载中为loading，没有数据为nomore
				einvoiceDate: '',
				billStatues: '',
				billStatuesList: [{
					"value": 1,
					"text": "正常票据",
				}, {
					"value": 8,
					"text": "已换开"
				}, {
					"value": 9,
					"text": "已作废"
				}],
				currentPage: 1,
				showDate: false,
				searchValue: '',
				agencyObj: {},
			}
		},
		onLoad() {
			uni.$on('billingEntity', (data) => {
				console.log('data', data);
				this.agencyObj = data
				this.pageType = 'unit'
				uni.setNavigationBarTitle({
					title: data.name // 标题内容
				});
				this.postSearchFun()
			})
		},
		methods: {
      scrolltolower () {
        console.log('shanghua')
				if (this.dataTip == 'nomore' || this.dataTip == 'loading') {
					return
				}
				this.currentPage += 1
				console.log('daodile', this.currentPage)
				this.loadmore();
			},
			async loadmore() {
				this.dataTip = 'loading'
				const params = {
					einvoiceDate: this.einvoiceDate,
					status: this.billStatues,
					pageIndex: this.currentPage,
					search: this.searchValue,
					agencyId: this.agencyObj.agencyID,
					cantonId: this.agencyObj.cantonID,
				}
				const res = await postUnitsearch(params)

				if (res.data.result == 0) {
					if (res.data.totalPages <= 1) {
						this.dataTip = 'nomore'
					}
					this.receipts = this.receipts.concat(res.data.einvoiceList)
					if (res.data.totalPages <= this.currentPage) {
						this.dataTip = 'nomore'
					} else {
						this.dataTip = 'loadmore'
					}
				} else {
					this.$u.toast(res.data.message || '接口错误');
				}
			},
			async postSearchFun() {
				this.currentPage = 1,
					this.receipts = []
				uni.showLoading({
					title: '加载中'
				})
				const params = {
					einvoiceDate: this.einvoiceDate,
					status: this.billStatues,
					pageIndex: this.currentPage,
					search: this.searchValue,
					agencyId: this.agencyObj.agencyID,
					cantonId: this.agencyObj.cantonID,
				}
				const res = await postUnitsearch(params)

				if (res.data.result == 0) {
					if (res.data.totalPages <= this.currentPage) {
						this.dataTip = 'nomore'
					}
					this.receipts = res.data.einvoiceList
					uni.hideLoading()
				} else {
					this.$u.toast(res.data.message || '接口错误');
					uni.hideLoading()
				}
			},
			showFilter(type) {
				if (type === 'date') {
					this.showDate = true
					return
				}
			},
			confirmDate(e) {
				console.log('qi', e)
			},
			billStatuesChange(e) {
				console.log('qi', e)
			},
			toDetail(receipt) {
				console.log('receipt',receipt)
				// return
				// const newObj = {
				// 	payerName: '',
				// 	einvoiceCode: '',
				// 	einvoiceNumber: '',
				// 	randomNumber: '',
				// 	agencyName: '',
				// 	issueDate: '',
				// 	totalAmount: '',
				// 	isgive: 1
				// }
				// 跳转到票据详情页
				uni.navigateTo({
					url: '/pages/home/billdetail?item=' + encodeURIComponent(JSON.stringify(receipt))
				})
			},
			onSearch(e) {
				console.log('sous', e)
				this.postSearchFun()
			},
		}
	}
</script>

<style scoped>
	.emptyBg {
		display: flex;
		justify-content: center;
	}

	.page-container {
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	/* 头部操作区 */
	.header-actions {
		display: flex;
		align-items: center;
		gap: 30rpx;
	}

	.scan-icon {
		width: 40rpx;
		height: 40rpx;
	}

	.more-icon {
		font-size: 40rpx;
		color: #333;
	}

	/* 搜索区域 */
	.search-container {
		padding: 30rpx;
	}

	.search-icon {
		position: absolute;
		left: 45rpx;
		top: 50%;
		transform: translateY(-50%);
	}

	/* 筛选栏 */
	.filters {
		display: flex;
		justify-content: space-around;
		padding: 20rpx 0;
		background-color: #fff;
		border-top: 1px solid #eee;
		border-bottom: 1px solid #eee;
	}

	.filter-item {
		width: 40%;
	}

	.arrow {
		font-size: 24rpx;
	}

	/* 票据列表 */
	.ticket-list {
		padding-bottom: 20rpx;
	}

	/* 票据卡片 */
	.ticket-card {
		background-color: #fff;
		margin: 30rpx;
		padding: 30rpx;
		border-radius: 16rpx;
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
	}

	.ticket-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 30rpx;
	}

	.ticket-icon {
		width: 80rpx;
		height: 80rpx;
		background-color: #4285f4;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-size: 40rpx;
	}

	.ticket-info {
		margin-left: 10rpx;
		flex: 1;
	}

	.patient-name {
		color: #333;
		font-size: 32rpx;
		width: 410rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		display: inline-block;
	}

	.amount {
		font-size: 36rpx;
		font-weight: bold;
		color: #e53935;
	}

	/* 票据详情 */
	.ticket-details {
		position: relative;
		margin-bottom: 30rpx;
	}

	.detail-item {
		display: flex;
		justify-content: space-between;
		margin-bottom: 16rpx;
	}

	.detail-position {
		position: absolute;
		top: 0;
		right: 0;
		display: flex;
		justify-content: space-between;
		margin-bottom: 16rpx;
	}

	.label {
		color: #666;
		font-size: 28rpx;
		width: 130rpx;
	}

	.value {
		color: #333;
		font-size: 28rpx;
		margin-left: 20rpx;
		/* text-align: right; */
		flex: 1;
	}

	.status {
		display: flex;
		align-items: center;
		gap: 10rpx;
	}

	.status-dot {
		width: 16rpx;
		height: 16rpx;
		background-color: #4caf50;
		border-radius: 50%;
	}

	.status-text {
		color: #4caf50;
		font-size: 28rpx;
	}

	/* 票据备注 */
	.ticket-remark {
		display: flex;
		justify-content: space-between;
		padding-top: 20rpx;
		border-top: 1px solid #eee;
		color: #666;
		font-size: 28rpx;
	}

	.remark-label {
		width: 450rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		display: inline-block;
	}

	/* 空状态 */
	.empty-state {
		text-align: center;
		padding: 40rpx;
		color: #999;
		font-size: 28rpx;
	}
</style>